<template>
    <div>
        <el-descriptions class="margin-top" :column="2" border :labelStyle="{ width: '140px' }">
            <el-descriptions-item label="用户名">{{ detailsData.name }}</el-descriptions-item>
            <el-descriptions-item label="电话号码">{{ detailsData.mobile }}</el-descriptions-item>
            <el-descriptions-item label="是否为小哥">
                <div v-if="detailsData.brotherfranchiseid > 0">
                    <span>是</span>
                    <el-button type="text" @click='removeBrother' size="small" icon="el-icon-delete"><span>点击移除小哥</span></el-button>
                </div>
                <div v-else>
                    <span>否</span>
                    <el-button type="text" icon="el-icon-plus" @click="dialogVisible = true;" size="small">点击设为小哥</el-button>
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="是否运营商管理员">
                <div v-if="detailsData.ismanager">
                    <span>是</span>
                </div>
                <div v-else>
                    <span>否</span>
                </div>
            </el-descriptions-item>
        </el-descriptions>

        <!-- 小哥限定接单地区 -->
        <div v-if="detailsData.brotherfranchiseid > 0">
            <h3>小哥限定接单地区</h3>
            <el-descriptions class="margin-top" title="" :column="2" border :labelStyle="{ width: '140px' }">
                <el-descriptions-item label="接单地区">
                    <!-- <span v-for="item in brotherObj.citys" :key="item.cityid">{{item.cityname}}</span> -->

                    <el-tag v-for="item in brotherObj.citys" :key="item.cityid" size="mini" class="e-m-r-10">{{item.cityname }}</el-tag>
                    <el-button @click="settingBrotherArea" type="text" size="small" icon="el-icon-setting">点击设置地区</el-button>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        
        <!-- 限定接单地区 -->
        <div v-if="shopList.length > 0">
            <h3>任职站点</h3>
            <span>共{{ shopList.length }}个站点</span>
            <el-table :data="shopList" style="width: 100%" :border="true">
                <el-table-column prop="name" label="站点名称">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="goShopView(scope.row.id)">{{ scope.row.name }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="是否站点管理员" width="150">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.ismanager" @change="switchShopManagerState($event, scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="站点状态" prop="usestate" width="150">
                    <template slot-scope="scope">
                        <span class="color-success" v-if="scope.row.usestate == '已启用'">{{ scope.row.usestate }}</span>
                        <span class="color-danger" v-else>{{ scope.row.usestate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="250">
                    <template slot-scope="scope">
                        <el-button @click="removeShop(scope.row.id)" type="text" size="small">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        <!-- 添加小哥 -->
        <el-dialog title="添加小哥" :visible.sync="dialogVisible" width="500px" append-to-body>
            <el-form ref="addForm" :model="addForm" label-width="140px">
                <el-form-item label="限定接单地区(选填)" prop="cityids">
                    <cityList v-model="addForm.cityids" :multiple="true" @change="SelectCityList"></cityList>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addBrother">确定</el-button>
            </span>
        </el-dialog>
        <!-- 小哥设置 -->
        <el-dialog title="小哥设置" :visible.sync="settingDialogVisible" width="500px" append-to-body>
            <el-form ref="settingForm" :model="settingForm" label-width="140px">
                <el-form-item label="修改接单地区" prop="cityids">
                    <cityList v-model="settingForm.cityids" :multiple="true"></cityList>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="settingDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="setBrother">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    mapState
} from 'vuex';
import cityList from '@/components/form-select-type/cityList.vue'
export default {
    components: {
        cityList
    },
    props: {
        franchiseId: {
            type: [Number, String],
            default: null
        },
        detailsData: {
            type: Object,
            default: () => {
                return {
                    franchiselist:[]
                }
            }
        }
    },
    computed: {
        ...mapState({
            operator: state => state.operator
        }),
        shopList() {
            try {
                return this.detailsData.franchiselist.find((item)=>item.id == this.franchiseId).storelist
            } catch (error) {
                return []
            }
        },
    },
    watch: { 
        dialogVisible(val){
            if (!val) {
                this.addForm.cityids = []
            }
        }
    },
    data() {
        return {
            brotherObj:{
                userid: 0,
                citys: []
            },
            // 添加小哥
            dialogVisible: false,
            addForm: {
                userId: null,
                mobile: "",
                name: "",
                quota: 0,
                cityids: []
            },
            nameDisabled: false,
            // 小哥设置
            settingDialogVisible: false,
            settingForm: {
                userId: null,
                quota: 0,
                cityids: []
            },
        }
    },
    mounted() {
        this.getBrotherList()

        // this.$axios.get('/User/Detail', {
        //     params:{
        //         "userId": this.detailsData.id,
        //     }
        // }).then((res) => {
        //     console.log('查询员工信息',res)
        // }).catch(() => {

        // })
    },
    methods: {
        // 
        getBrotherList() {
            this.$axios.post('/Franchise/Brother/List', {
                "PageIndex": 1,
                "pageSize": 999,
                "franchiseId": this.franchiseId,
                "key": this.detailsData.mobile
            }).then((res) => {
                console.log('查询我的小哥的信息',res.rows.find((item)=>item.userid == this.detailsData.id))
                let getBrother = res.rows.find((item)=>item.userid == this.detailsData.id)
                if(getBrother){
                    this.brotherObj = getBrother
                }
            }).catch(() => {

            })
        },
        // 设置是否站点管理员
        switchShopManagerState(event, row) {
            this.$axios.get(`/store/staff/SetManager?storeId=${row.id}&UserId=${this.detailsData.id}&isSet=${row.ismanager}`).then((res) => {
                this.$message.success(res.msg);
            }).catch((err) => {
                // this.getList()
            })
        },
        // 移除站点
        removeShop(id){
            this.$confirm('此操作将该员工移除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post(`/Store/Staff/Remove?storeId=${id}&UserId=${this.detailsData.id}`).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.updateData()
                })
            }).catch(() => {

            });
        },
        // 移除小哥
        removeBrother() {
            this.$confirm('此操作将移除该小哥, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.get(`/Franchise/Brother/Remove?franchiseId=${this.franchiseId}&UserId=${this.detailsData.id}`).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.updateData()
                })
            }).catch(() => {

            });
        },
        // 设为小哥
        addBrother() {
            console.log({
                userId: this.addForm.userId,
                franchiseId: this.franchiseId,
                mobile: this.addForm.mobile,
                // name: this.addForm.name,
                // name: '猿哥'+ this.addForm.mobile.slice(-4),
                cityids: this.addForm.cityids,
                quota: 0
            })
            let cityids = 0
            if (this.addForm.cityids.length > 0) {
                cityids = this.addForm.cityids
            } else {
                if (this.operator?.city?.cityid > 0) {
                    cityids = [this.operator.city.cityid]
                }
            }
            if (cityids == 0) {
                this.$message.error('请选择接单地区')
                return
            }
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    this.$axios.post('/Franchise/Brother/Add', {
                        franchiseId: this.franchiseId,
                        cityids: cityids,
                        quota: 0,
                        mobile: this.detailsData.mobile,
                        UserId: this.detailsData.id
                    }).then((res) => {
                        console.log(res)
                        this.dialogVisible = false
                        this.updateData()
                        this.getBrotherList()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        SelectCityList(v) { //接单地区
            console.log('SelectCityList', v)
            this.addForm.cityids = v
        },
        // 更改设置地区
        settingBrotherArea(){
            this.settingForm.userId = this.detailsData.id
            this.settingForm.cityids = []
            this.brotherObj.citys.forEach(item => {
                this.settingForm.cityids.push(item.cityid)
            });

            this.settingDialogVisible = true
        },
        // 确认设置地区
        setBrother() {
            this.$axios.post('/Franchise/Brother/Edit', {
                userId: this.settingForm.userId,
                cityids: this.settingForm.cityids,
                quota: 0
            }).then((res) => {
                console.log(res)
                this.settingDialogVisible = false
                this.updateData()
                this.getBrotherList()
            })
        },
        // 查看站点
        goShopView(id){
            console.log('查看站点',id)
            window.open('/shop/details?id=' + id, '_blank');
        },
        updateData(){
            this.$emit('confirm',this.detailsData.id)
        }
    }
}
</script>